<template>
    <div class="user">
        <header><van-nav-bar title="用户设置" /></header>
        <div class="info">
            <div class="admin-info">
                <div class="userName">用户名：{{ userInfo.userName }}</div>
                <div class="userPower" v-if="userInfo.userPower <= 0">用户权限：普通用户</div>
                <div class="userPower" v-else>用户权限：管理员</div>
            </div>
            <div class="userAvator"> <img :src=userInfo.avatar alt=""></div>
        </div>
        <div class="options">
            <div class="opt changePasswd" @click="changePasswd">修改密码</div>
            <div class="opt getHelp" @click="getHelp">获取帮助</div>
            <div class="opt getRelation" @click="askAuthor">联系作者</div>
            <div class="opt loginOut" @click="loginOut">退出登录</div>
        </div>
    </div>

    <!-- 弹出层 -->
    <van-popup v-model:show="showPopup" round position="bottom" @close="cancle" :style="{ height: '25%' }">
        <div class="popupBtn">
            <van-button size="small" type="danger" @click="cancle">取消</van-button>
            <van-button size="small" type="success" @click="changePasswdConfirm">确认</van-button>
        </div>
        <van-field v-model="password1" type="password" label="新密码" />
        <van-field v-model="password2" type="password" label="确认密码" />
    </van-popup>

</template>

<script>
import { toRefs,reactive,onBeforeMount} from 'vue';
import axios from '../api/axios';
import { myDialog } from '../api/utils';
import { Dialog, Toast } from 'vant';
import router from '@/router';
import { useStore } from 'vuex';
export default {
   setup(){
        const state = reactive({
            showPopup:false,
            userInfo:{},
            password1:'',
            password2:''
        })

        const store = useStore()
        //从仓库获取登录用户信息
        onBeforeMount(() => {
            state.userInfo = store.state.userInfo
        })
        //取消事件
        function cancle(){
            state.password1 = '',
            state.password2 = ''
            state.showPopup = false
        }
        //退出登录事件
        function loginOut(){
            myDialog('是否确认退出登录？',async ()=>{
               const res = await axios.post('admin/signout')
               sessionStorage.setItem('token',"")
               sessionStorage.setItem('userPower',"")
               Toast.success(res.msg)
               router.push('/login')
            })
        }
        //修改密码事件
        function changePasswd(){
            state.showPopup = !state.showPopup
        }
        //确认修改密码
        function changePasswdConfirm(){
            if(state.password1 !== state.password2){
                Toast.fail('两次输入密码不一致')
                return
            }else if(!(/^[A-Za-z0-9_]{6,20}$/.test(state.password1))){
                Toast.fail('密码格式有误')
                return
            }else{
                axios.post('/admin/changePassWord',{id:store.state.userInfo.userId,passWord:state.password1}).then((res)=>{
                    console.log(res);
                    router.push('/login')
                })
            }
            state.showPopup = !state.showPopup
        }

        async function getHelp(){
            Dialog.alert({
                title:'提示',
                message:'这儿没什么帮助，你去问问作者吧'
            })
        }

        function askAuthor(){
            Dialog.alert({
                title:'提示',
                message:'作者QQ:2440340437'
            })
        }

        return{
            ...toRefs(state),
            loginOut,
            changePasswd,
            cancle,
            changePasswdConfirm,
            getHelp,
            askAuthor
        }
   }
}
</script>

<style lang="less" scoped>
.user{
    font-size: 14px;
    header{
        height: 46px;
    }
    .info{
        padding: 10px;
        height: 350px;
        display: flex;
        background-color: #5f3c3c;
        .admin-info{
            width: 200px;
            margin-top: 50px;
            div{
                margin: 10px;
            }
        }
        .userAvator{
            width: 150px;
            height: 150px;
            margin-left: 10px;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
    }
    .options{
        text-align: left;
        width: 100%;
        .opt{
            height: 40px;
            line-height: 40px;
            border: 2px solid #5cd9f2;
            background-color: #fff;
            padding-left: 20px;
        }
        .opt::after{
            content: '>';
            font-size: 16px;
            margin-left: 270px;
        }
    }
}

.popupBtn{
    display: flex;
    justify-content: space-between;
}
</style>